<script setup lang="ts">
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import EntDeviceTreeCheck from '../EntDeviceTreeCheck/index.vue'
import eleStatisticsApi from '@/api/modules/ele.statistics'
import type { PolluteErrRow } from '@/api/modules/types/data.query'

enum TIME_TYPE {
  DAY = 'day',
  MONTH = 'month',
  REAL_TIME = 'real_time',
  YEAR = 'year',
}

const route = useRoute()
const deviceInfo: PolluteErrRow = JSON.parse(sessionStorage.getItem('PolluteErrRow') || '{}')
const deviceId = route.params.id as string
// const type = route.query.type as DeviceType
const loading = ref(false)
const tableData = ref<any>([])

const timeType = computed(() => {
  return route.meta.timeType
})

const pickType: any = computed(() => {
  switch (timeType.value) {
    case TIME_TYPE.DAY:
      return 'date'
    default:
      return timeType.value
  }
})

const currentTime = ref(new Date())
const currentDevices = ref<any>([])

const startTime = computed(() => {
  switch (timeType.value) {
    case TIME_TYPE.DAY:
      return dayjs(currentTime.value).startOf('day').format('YYYYMMDD')
    case TIME_TYPE.MONTH:
      return dayjs(currentTime.value).startOf('month').format('YYYYMMDD')
    case TIME_TYPE.YEAR:
      return dayjs(currentTime.value).startOf('year').format('YYYYMMDD')
    default:
      return ''
  }
})

const endTime = computed(() => {
  switch (timeType.value) {
    case TIME_TYPE.DAY:
      return dayjs(currentTime.value).endOf('day').add(1, 'day').format('YYYYMMDD')
    case TIME_TYPE.MONTH:
      return dayjs(currentTime.value).endOf('month').add(1, 'day').format('YYYYMMDD')
    case TIME_TYPE.YEAR:
      return dayjs(currentTime.value).endOf('year').add(1, 'day').format('YYYYMMDD')
    default:
      return ''
  }
})

const gridConfig: any = computed(() => {
  return {
    height: '100%',
    data: tableData.value,
    border: true,
    loading: loading.value,
    rowConfig: {
      isCurrent: true,
    },
    columns: [
      {
        type: 'seq',
        title: '序号',
        width: 80,
      },
      {
        field: 'Name',
        title: '检查点名称',
        showOverflow: true,
        minWidth: 180,
      },
      {
        field: 'time',
        title: '日期',
        width: 120,
      },
      {
        field: 'Ele_FApT',
        title: '总',
      },
      {
        field: 'Ele_FApPike',
        title: '尖',
      },
      {
        field: 'Ele_FApPeak',
        title: '峰',
      },
      {
        field: 'Ele_FApFlat',
        title: '平',
      },
      {
        field: 'Ele_FApVale',
        title: '谷',
      },
    ],
  }
})

function loadDayData() {
  loading.value = true
  eleStatisticsApi.GetElectricityDay({ deviceObjIDs: currentDevices.value.map((item: any) => item.ObjID), startTime: startTime.value, endTime: endTime.value }).then((res) => {
    loading.value = false
    tableData.value = currentDevices.value.map((item: any) => {
      const timeData = res[item.ObjID]
      const time = Object.keys(timeData)[0]
      return { ...item, ...timeData[time], time }
    })
  }, () => {
    loading.value = false
  })
}

function loadMonthData() {
  loading.value = true
  eleStatisticsApi.GetElectricityMonth({
    deviceObjIDs: currentDevices.value.map((item: any) => item.ObjID),
    startTime: startTime.value,
    endTime: endTime.value,
  }).then((res) => {
    loading.value = false
    tableData.value = currentDevices.value.map((item: any) => {
      const timeData = res[item.ObjID]
      const time = Object.keys(timeData)[0]
      return { ...item, ...timeData[time], time }
    })
  }, () => {
    loading.value = false
  })
}

function loadYearData() {
  loading.value = true
  eleStatisticsApi.GetElectricityYear({ deviceObjIDs: currentDevices.value.map((item: any) => item.ObjID), startTime: startTime.value, endTime: endTime.value }).then((res) => {
    loading.value = false
    tableData.value = currentDevices.value.map((item: any) => {
      const timeData = res[item.ObjID]
      const time = Object.keys(timeData)[0]
      return { ...item, ...timeData[time], time }
    })
  }, () => {
    loading.value = false
  })
}

function loadData() {
  if (currentDevices.value.length <= 0) {
    return ElMessage.warning('请勾选至少一个设备')
  }
  switch (timeType.value) {
    case TIME_TYPE.DAY:
      return loadDayData()
    case TIME_TYPE.MONTH:
      return loadMonthData()
    case TIME_TYPE.YEAR:
      return loadYearData()
  }
}

function handleChangeTime() {
  loadData()
}

function currentChange(nodes: any[]) {
  const mapId: any = []
  const devices: any = []
  nodes.forEach((item) => {
    if (!mapId.includes(item.ObjID)) {
      devices.push(item)
      mapId.push(item.ObjID)
    }
  })
  currentDevices.value = devices
  loadData()
}
</script>

<template>
  <PageMain>
    <div class="flex">
      <div class="mr-20px w-280px flex-shrink-0 b-r-1px b-r-#EBEEF5 b-r-solid pr-10px">
        <EntDeviceTreeCheck :ent-id="deviceInfo.EntObjID" :device-id="deviceId" @current-change="currentChange" />
      </div>
      <div class="flex-grow-1 overflow-x-hidden">
        <div class="mb-[10px]">
          日期：
          <el-date-picker
            v-model="currentTime"
            :type="pickType"
            placeholder="请选择时间"
            @change="handleChangeTime"
          />
        </div>
        <div v-auto-height="40">
          <vxe-grid v-bind="gridConfig" />
        </div>
      </div>
    </div>
  </PageMain>
</template>

<style scoped>
.ent-tree-panel {
  height: calc(100vh - 200px);
}
</style>
